<template>
  <div v-show="visible" class="diy-dialog">
    <el-card style="height: 700px">
      <div class="relative h-10">
        <el-icon size="25" class="absolute right-0 cursor-pointer" @click="close"
          ><Close
        /></el-icon>
      </div>
      <FlowView :flow-data="flowData" style="width: 100%; height: 100%" />
    </el-card>
  </div>
</template>

<script setup>
  import FlowView from '@/components/FlowView/index.vue';
  import { computed, defineEmits } from 'vue';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    flowData: {
      type: Object,
      default: () => {},
    },
  });
  const emits = defineEmits(['update:modelValue']);
  const visible = computed({
    set(v) {
      emits('update:modelValue', v);
    },
    get() {
      return props.modelValue;
    },
  });

  function close() {
    emits('update:modelValue', false);
  }
</script>

<style scoped lang="scss">
  .diy-dialog {
    position: fixed;
    z-index: 9999999;
    top: 45%;
    left: 50%;
    width: 1000px;
    transform: translate(-50%, -50%);
    background-color: #fff;
  }
</style>
